<template>
	<view>
		<scroll-view
			scroll-y
			:scroll-top="scrollTop"
			@scroll="_scroll"
			class="_page"
			:style="{ height: `calc( 100vh - ${navBarHeight}px )`,paddingBottom: 'calc(144rpx + env(safe-area-inset-bottom))' }"
		>
			<!-- #ifdef APP-PLUS||MP -->
			<uni-nav-bar dark fixed backgroundStyle="#FFFFFF" color="#121317" status-bar>
				<template slot="left">
					<uni-icons type="arrow-left" @click="newReturnPagesApplication()" color="#121317" size="24"></uni-icons>
				</template>
				<template>
					<view class="nav_title">查招考试分数线</view>
				</template>
				<!-- #ifdef APP-PLUS||H5 -->
				<template slot="right">
					<view class="_right" @click.stop="_shareOpen">
						<text class="iconfont icon-a-Frame1076" style="color: #007aff; font-size: 32rpx"></text>
						<!-- <uni-icons type="redo-filled" color="#007AFF" size="20"></uni-icons> -->
						<text class="text">分享</text>
					</view>
				</template>
				<!-- #endif -->
			</uni-nav-bar>
			<!-- #endif -->
			<view class="_padding" style="background-color: #ffffff; padding-top: 20rpx">
				<mSearch :val="searchVal" :apiInfo="searchApiInfo" @check="(e) => checkSearch(e)" placeholder="请输入本科专业查询"></mSearch>
			</view>
			<view class="default" v-if="!searchVal">
				<view class="img-box">
					<image src="https://bicpic.baikewang.com/images/1646994256440.png" mode="heightFix"></image>
					<view class="text">先在上方输入本科专业哦~</view>
				</view>
			</view>
			<!-- 截图区域 -->
			<view class="content-box" v-else id="htmlCanvas">
				<view class="school-table echarts_box baike_logo"
				:style="{ backgroundImage: 'url(' + baikeLogobaseBg + ')' }" v-if="majorOptionInfo.chartsDataLine.categories.length">
					<qiun-data-charts
						type="area"
						@complete="(e) => complete(e, '', '', majorOptionInfo.index)"
						tooltipFormat="heat"
						:opts="majorOptionInfo.options"
						:chartData="majorOptionInfo.chartsDataLine"
					/>
				</view>
				<view class="school-table" :class="{ baike_logo: !showMember }"
				:style="{ backgroundImage: 'url(' + baikeLogobaseBg + ')' }">
					<view class="val_tips" v-if="stu_type">*考试分数线展示数据为{{ stu_type }}</view>
					<uni-table emptyText="暂无更多数据" v-if="!showMember && showTable">
						<!-- 表头行 -->
						<uni-tr tr_class="thead">
							<uni-th align="center" width="25%">考生年份</uni-th>
							<uni-th align="center" width="20%">考生类型</uni-th>
							<template v-if="tableScoreTable&&tableScoreTable.length">
								<uni-th v-for="(item,index) in tableScoreTable" :key="index" align="center" :width="tableScoreTable.length==1?'20%':'28%'">{{item.label}}</uni-th>
							</template>
							<uni-th align="center" width="20%">过线人数</uni-th>
							<uni-th align="center" width="20%">录取率</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="(item, index) in scoreList" :key="index">
							<uni-td align="center" width="25%" class="table-bold">
								<view>
									{{ item.year }}年
								</view>
							</uni-td>
							<uni-td align="center" width="20%" class="table-bold">
								<view>
									{{ item.stu_type || '--' }}
								</view>
							</uni-td>
							<template v-if="tableScoreTable&&tableScoreTable.length">
								<uni-td v-for="(scoreItem,scoreIndex) in tableScoreTable" :key="scoreIndex" align="center" :width="tableScoreTable.length==1?'20%':'28%'" class="table-bold">
									<view v-if="item[ scoreItem.prop ] || item[ scoreItem.prop ] === 0 " >
										{{ item[scoreItem.prop] || '0' }}分
									</view>
									<view v-else>
										未公布
									</view>
								</uni-td>
							</template>
							<uni-td align="center" width="20%" class="table-bold" v-if="item.signup_people||item.signup_people===0">
								<view>
									{{ item.signup_people || '0' }}人
								</view>
							</uni-td>
							<uni-td align="center" width="20%" class="table-bold" v-else><view>未公布</view></uni-td>
							<uni-td align="center" width="20%" class="table-bold" v-if="item.luqu_rate||item.luqu_rate===0"><view>{{ item.luqu_rate || '0' }}</view></uni-td>
							<uni-td align="center" width="20%" class="table-bold" v-else><view>未公布</view></uni-td>
							<template slot="tips" v-if="item.remark">
								<view class="border-tips info_tips">
									<uni-icons class="_flex" style="margin-right: 4rpx" type="info-filled" color="#E34D59"
										size="16"></uni-icons>
									<view class="single_row" :class="{ multiline: isOpenInfo[index] === 'open' }">
										{{ item.remark }}
									</view>
									<uni-icons
										@click="_toggle(item,index)"
										class="_flex"
										:class="[isOpenInfo[index]]"
										type="bottom"
										color="#E34D59"
										size="12"
									></uni-icons>	
								</view>
							</template>
						</uni-tr>
					</uni-table>
					<!-- 会员权益模块 -->
					<memberBenefits v-if="showMember"></memberBenefits>
				</view>
			</view>
				
		</scroll-view>
	
		<!-- 按钮 -->
		<view class="bottom_btn" v-if="searchVal && !showMember && !notShowClaimOutLine">
			<view class="primary_btn _block">领取考试大纲</view>
		</view>

		<!-- 分享示例 -->
		<uni-popup :is-mask-click="false" ref="share" type="share" safeArea backgroundColor="transparent">
			<uni-popup-share title="分享至" cancelText="取消分享" @select="select"></uni-popup-share>
		</uni-popup>

		<!-- 截图 -->
		<subfunction v-if="searchVal && !showMember" :scrollTop="topHeight" @_top="_top" @share="_shareOpen"></subfunction>

		<view class="bottom_btn">
			<!-- <view class="primary_btn _block">查看考试报告</view> -->
			<m-button @clickBtn="popupBtnClick('查看考试报告', { major_id: majorInfo.major_id })" type="primary" size="xxl">查看考试报告</m-button>
		</view>
	</view>
</template>

<script>
import mSearch from '../components/m-search';
import subfunction from '../components/subfunction.vue';
import memberBenefits from '../components/memberBenefits.vue';
export default {
	components: {
		mSearch,
		subfunction,
		memberBenefits
	},
	data() {
		return {
			isLoading: true,
			isOpenInfo: {},

			scrollTop: 0,
			topHeight: 0,
			majorOptionInfo: {
				index: 0,
				// 折线图数据
				options: {
					color: ['#0052D9', '#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
					padding: [15, 30, 0, 10],
					dataLabel: false,
					dataPointShape: true,
					enableScroll: false,
					noteMerge: true,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						axisLineColor: '#EFF0F0',
						fontColor: '#858688',
						fontSize: 10,
						marginTop: 2,
						boundaryGap: 'center',
						title: '年份',
						titleFontSize: 12,
						titleFontColor: '#858688',
						titleOffsetY: -25,
						titleOffsetX: -20,
						calibration: true
					},
					yAxis: {
						gridType: 'dash',
						dashLength: 5,
						gridColor: '#EFF0F0',
						showTitle: true,
						eachRange: 50,
						data: [
							{
								min: 0,
								// max: 600,
								axisLineColor: '#EFF0F0',
								position: 'left',
								title: '分数',
								fontSize: 10,
								fontColor: '#858688',
								// calibration: true,
								tofix: 0,
								titleFontSize: 12,
								titleFontColor: '#858688',
								titleOffsetY: -6,
								titleOffsetX: 4
							}
						]
					},
					extra: {
						area: {
							width: 2,
							type: 'straight',
							activeType: 'hollow',
							addLine: true,
							gradient: true
						},
						tooltip: {
							showArrow: true,
							borderRadius: 4,
							bgColor: '#272E34',
							bgOpacity: 1,
							gridType: 'dash',
							dashLength: 8,
							gridColor: 'rgba(0, 122, 255, 0.50)',
							fontColor: '#FFFFFF',
							fontSize: 10,
							legendShow: false,
							showCategory: true,
							categoryFontSize: 14,
							categoryColor: '#FFFFFF'
						}
					}
				},
				chartsDataLine: {
					categories: [],
					series: []
				}
			},
			searchVal: '',
			searchApiInfo: {
				api: 'getLicationUniversityMajorList',
				data: 'major_name',
				checklabel: 'major_name'
			},
			majorInfo: {},
			scoreList: [],
			tableScoreTable: [],
			showTable: false,

			stu_type: ''
		};
	},
	computed: {
        // 导航条高度
        navBarHeight() {
            let that = this;
            let navHeight = 0;
            let navigationBarHeight = 0;
            // #ifndef H5
            // 状态栏高度
            let info = uni.getSystemInfoSync();
            let statusBarHeight = info.statusBarHeight + info.safeAreaInsets.top || 0;
            // #ifdef MP

            // 获取微信胶囊的位置信息 width,height,top,right,left,bottom
            const custom = uni.getMenuButtonBoundingClientRect();
            // 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
            navigationBarHeight = custom.height + (custom.top - statusBarHeight) * 2;
            // #endif

            // 总体高度 = 状态栏高度 + 导航栏高度
            navHeight = navigationBarHeight + statusBarHeight;
            // #endif
            return navHeight;
        }
    },
	watch: {
		searchVal(curr) {
			if (!this.isLoading) {
				this.getInfo();
			}
		}
	},
	methods: {
		_toggle(item,index){
			let that = this;
			let _text = that.toggleTips(index, that.isOpenInfo);
			let obj = {
				[index]: _text
			}
			that.isOpenInfo = Object.assign({},that.isOpenInfo,obj);
		},
		checkSearch(info) {
			let that = this;
			that.searchVal = info[that.searchApiInfo.checklabel];
			that.majorInfo = info;
			
			that.isLoading = false;
		},
		async getInfo() {
			let that = this;
			if (!that.searchVal) {
				that.scoreList = [];
				that.majorInfo = {};
				return;
			}
			that.getScoreEcharts();
			that.getUniversityMajorScore();
		},
		async getScoreEcharts() {
			let that = this;
			that.majorOptionInfo.chartsDataLine.categories = [];
			that.majorOptionInfo.chartsDataLine.series = [];
			let obj = {
				major_id: that.majorInfo.major_id
			};
			let { code, data } = await that.$application_api.getScoreEcharts(obj);
			if (code != 0) return;
			that.stu_type = data.stu_type || '';
			// let year = that.majorDetailArr[0].year;
			// let _index = 0;
			// if (data.echarts_data.year && data.echarts_data.year.length) {
			// 	data.echarts_data.year.forEach((item, index) => {
			// 		if (item === year) {
			// 			_index = index;
			// 		}
			// 	});
			// }
			// that.majorOptionInfo.index = _index;
			// X轴数据
			that.majorOptionInfo.chartsDataLine.categories = data.echarts_data.year || [];
			// Y轴数据
			that.majorOptionInfo.chartsDataLine.series = data.echarts_data.series || [];
			// 录取分数
			// that.majorOptionInfo.options.extra.tooltip.data = data.echarts_data.people || [];
			// if (that.majorOptionInfo.chartsDataLine.categories.length) {
			// 	that.showControlLine = true;
			// }
		},
		async getUniversityMajorScore() {
			let that = this;
			let obj = {
				major_id: that.majorInfo.major_id
			};
			let { code, data } = await that.$application_api.getUniversityMajorScore(obj);
			if (code != 0) return;
			that.scoreList = data.data || [];
			that.tableScoreTable = data.header || [];

			setTimeout(()=>{
				that.showTable = true;
			},300)
		},
		// 查看历年招生人数
		recruitStudents() {
			// console.log('**********');
			this.showRecruitStudents = true;
		},
		_top() {
			this.scrollTop = this.topHeight;
			setTimeout(() => {
				this.scrollTop = 0;
			}, 100);
		},
		_scroll(e) {
			this.topHeight = e.detail.scrollTop;
		},
		_shareOpen() {
			this.$refs.share.open('bottom');
		}
	},
	onLoad(){
		let that = this;
		getApp().globalData.isLiscation = true;
		let searchDataInfo = uni.getStorageSync('searchDataInfo');
		let activeInfo = searchDataInfo.checkInfo;
		that.checkSearch(activeInfo);
	},
};
</script>
<style lang="scss" scoped>
._padding {
	padding: 0 40rpx;
	box-sizing: border-box;
}
._page {
	width: 100vw;
	background-color: #ffffff;
	box-sizing: border-box;
}

.content-box {
	width: 100vw;
	padding: 10rpx 0 10rpx 39rpx;
	box-sizing: border-box;
	.echarts_box{
		padding-right: 39rpx;
		box-sizing: border-box;
	}
}
</style>
